import React from 'react';
import { Tag, Form, Input, Button, Card, Spin } from 'antd';
import PropTypes from 'prop-types'
import { connect } from 'dva';

const FormItem = Form.Item;
let editor = null;
class AddArticle extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tags: [],
            editorContent: '',
            inputVisible: false,
            inputValue: '',
        }
    }
    state = {
        editorState: false,
    };
    handleChange(value) {
        this.setState({ text: value })
    }
    componentDidMount() {
        this.initState = window.__INITIAL_STATE__;
        if (!this.initState.islogin) {
            this.props.dispatch({ type: 'article/go', payload: { url: '/user' } });
        }
        var E = require('wangeditor');
        const elem = this.refs.editorElem
        editor = new E(elem)
        // 使用 onchange 函数监听内容的变化，并实时更新到 state 中
        editor.customConfig.onchange = html => {
            this.setState({
                editorContent: html
            })
        }
        editor.create()
    }
    showInput = () => {
        this.setState({ inputVisible: true }, () => this.input.focus());
    }

    handleInputChange = (e) => {
        this.setState({ inputValue: e.target.value });
    }

    handleInputChange = (e) => {
        this.setState({ inputValue: e.target.value });
    }

    handleInputConfirm = () => {
        const state = this.state;
        const inputValue = state.inputValue;
        let tags = state.tags;
        if (inputValue && tags.indexOf(inputValue) === -1) {
            tags = [...tags, inputValue];
        }
        this.setState({
            tags,
            inputVisible: false,
            inputValue: '',
        });
    }

    OnQuestionAdd = (e) => {
        e.preventDefault();
        var fields = this.props.form.validateFieldsAndScroll;
        fields((errors, values) => {
            if (errors) {
                return;
            }
            const data = {
                Title: values.title,
                Tags: this.state.tags.toString(),
                Content: this.state.editorContent,
                ArticleType: 1
            }

            this.props.dispatch({ type: 'article/saveArticle', payload: data });

        })
    }
    saveInputRef = input => this.input = input
    render() {
        const { tags, inputVisible, inputValue } = this.state;
        const { getFieldDecorator } = this.props.form;
        const { editorState } = this.state;
        const { postloading } = this.props.article;
        return (
            <div>

                <div className='add-leftcontent'>
                    <Card>
                        <Form layout={'vertical'} onSubmit={this.OnQuestionAdd}>
                            <FormItem
                                label="标题"
                            >
                                {getFieldDecorator('title', {
                                    rules: [{ required: true, message: '请输入你的问题标题!', whitespace: true }]
                                })(
                                    <Input placeholder="请输入你的问题标题!" />
                                    )}
                            </FormItem>
                            <FormItem
                                label="提问内容" style={{ width: '100%' }}
                            >

                                <div ref="editorElem" name="questioncontent" style={{ textAlign: 'left' }}>
                                </div>

                            </FormItem>
                            <FormItem
                                label="标签"
                            >
                                {tags.map((tag, index) => {
                                    const isLongTag = tag.length > 20;
                                    const tagElem = (
                                        <Tag key={tag} closable={index !== 0} afterClose={() => this.handleClose(tag)}>
                                            {isLongTag ? `${tag.slice(0, 20)}...` : tag}
                                        </Tag>
                                    );
                                    return isLongTag ? <Tooltip title={tag}>{tagElem}</Tooltip> : tagElem;
                                })}
                                {inputVisible && (
                                    <Input
                                        ref={this.saveInputRef}
                                        type="text"
                                        size="small"
                                        style={{ width: 78 }}
                                        value={inputValue}
                                        onChange={this.handleInputChange}
                                        onBlur={this.handleInputConfirm}
                                        onPressEnter={this.handleInputConfirm}
                                    />
                                )}
                                {!inputVisible && <Button size="small" type="dashed" onClick={this.showInput}>+ 标签</Button>}
                            </FormItem>

                            <FormItem>
                                <Spin spinning={postloading}>
                                    <Button type='primary' htmlType="submit" style={{ width: '100%' }} loading={false}>提交问题</Button>
                                </Spin>
                            </FormItem>
                        </Form>
                    </Card>
                </div >

                <div className='add-rightcontent'>
                    <Card className='titleinfo' >
                        <p>题目最好命中要害</p>
                    </Card>
                    <Card className='pointinfo' >
                        <p>请直接切入重点</p>
                        <p>请不要用好像，大概等词语</p>
                        <p>最好把代码展示出来</p>
                        <p>请把异常展示出来</p>
                        <p>最好把代码展示出来</p>
                        <p>最好把代码展示出来</p>
                        <p>最好把代码展示出来</p>
                    </Card>
                </div>
            </div>
        )
    }
}

AddArticle.propTypes = {
    form: PropTypes.object,
    article: PropTypes.object,
    dispatch: PropTypes.func
}

const AddArticleForm = Form.create()(AddArticle);

export default connect(({ article }) => ({ article }))(AddArticleForm);
